<template>
    <div>
        <el-row :gutter="10" class="mb8">

            <el-col :span="1.5">
                <el-button
                    plain
                    size="mini"
                    @click="addUserProject"
                >添加项目用户
                </el-button>
            </el-col>

            <el-col :span="1.5">
                <el-button
                    :disabled="multiple"
                    plain
                    size="mini"
                    @click="addNotice"
                >设为报警人员
                </el-button>
            </el-col>

            <el-col :span="1.5">
                <el-button
                    :disabled="multiple"
                    plain
                    size="mini"
                    @click="cancelNotice"
                >取消报警人员
                </el-button>
            </el-col>

            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="userProjectList" @selection-change="handleSelectionChange">

            <el-table-column type="selection" width="50" align="center"/>
            <el-table-column label="序号" align="center" type="index" :index="calculateIndex"/>
            <el-table-column label="用户名称" align="center" key="userName" prop="userName"
                             :show-overflow-tooltip="true"
            />
            <el-table-column label="手机号码" align="center" key="phoneNumber" prop="phoneNumber"/>
            <el-table-column label="报警人员" align="center" prop="isNotice">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.isNotice" type="success" disable-transitions>
                        是
                    </el-tag>
                    <el-tag v-else type="info" disable-transitions>
                        否
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center" prop="createTime" width="160">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createTime) }}</span>
                </template>
            </el-table-column>

            <el-table-column
                label="操作"
                align="center"
                width="220"
                class-name="small-padding fixed-width"
            >

                <template slot-scope="scope" v-if="scope.row.userId !== 1">

                    <el-button size="mini" type="text" @click="removeUserProject(scope.row)">
                        移除
                    </el-button>


                    <el-button
                        size="mini"
                        type="text"
                        @click="handleAuthProjectRole(scope.row)"
                        v-hasPermi="['business:projectRoleUser:add']"
                    >分配角色
                    </el-button>

                </template>

            </el-table-column>

        </el-table>

        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />

        <el-dialog :title="allocationTitle" :visible.sync="allocationOpen" width="500px" append-to-body :close-on-click-modal ="false">
            <el-form :model="queryUserParams" ref="allocationQueryForm" :rules="allocationQueryRules"
                     :inline="true" label-width="85px" @submit.native.prevent
            >
                <el-form-item label="手机号码" prop="phoneNumber">
                    <el-input
                        v-model="queryUserParams.phoneNumber"
                        placeholder="请输入手机号码搜索用户"
                        clearable
                        size="small"
                        @keyup.enter.native="selectUserList"
                    />
                </el-form-item>

                <el-form-item label="用户名称" prop="userName">
                    <el-input
                        v-model="queryUserParams.userName"
                        placeholder="请输入用户名称搜索用户"
                        clearable
                        size="small"
                        @keyup.enter.native="selectUserList"
                    />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="selectUserList">搜索</el-button>
                </el-form-item>
            </el-form>

            <el-table
                :data="userList"
                height="250"
                border
                style="width: 100%"
            >

                <el-table-column prop="userName" label="用户名称" align="center" width="150"/>
                <el-table-column prop="phoneNumber" label="手机号码" align="center" width="200"/>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">

                        <el-button type="primary" size="small" @click="allocationClick(scope.row)">
                            添加
                        </el-button>

                    </template>

                </el-table-column>
            </el-table>

            <pagination
                v-show="userListTotal>0"
                :total="userListTotal"
                :page.sync="queryUserParams.pageNum"
                :limit.sync="queryUserParams.pageSize"
                @pagination="selectUserList"
            />

        </el-dialog>

        <el-dialog title="分配角色" :visible.sync="authProjectRoleOpen" width="600px" append-to-body :close-on-click-modal ="false">

            <el-tabs v-model="activeName" type="border-card">

                <el-tab-pane label="已分配" name="yes">

                    <el-table v-loading="loading" :data="yesProjectRoleList" @selection-change="handleSelectionChange">

                        <el-table-column label="角色名称" align="center" prop="projectRoleName"/>
                        <el-table-column
                            label="操作"
                            align="center"
                            class-name="small-padding fixed-width"
                        >
                            <template slot-scope="scope" v-if="scope.row.userId !== 1">
                                <el-button
                                    size="mini"
                                    type="text"
                                    @click="unAllocatedProjectRole(scope.row)"
                                >移除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <!--          <pagination-->
                    <!--            v-show="yesProjectRoleTotal > 0"-->
                    <!--            :total="yesProjectRoleTotal"-->
                    <!--            :page.sync="projectRoleQueryParams.pageNum"-->
                    <!--            :limit.sync="projectRoleQueryParams.pageSize"-->
                    <!--            @pagination="getProjectRoleAllocationList"-->
                    <!--          />-->
                </el-tab-pane>

                <el-tab-pane label="未分配" name="no">
                    <el-table v-loading="loading" :data="noProjectRoleList" @selection-change="handleSelectionChange">
                        <!--        <el-table-column type="selection" width="55" align="center" />-->
                        <el-table-column label="角色名称" align="center" prop="projectRoleName"/>
                        <el-table-column
                            label="操作"
                            align="center"
                            class-name="small-padding fixed-width"
                        >
                            <template slot-scope="scope" v-if="scope.row.userId !== 1">
                                <el-button
                                    size="mini"
                                    type="text"
                                    @click="allocatedProjectRole(scope.row)"
                                >分配
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <!--          <pagination-->
                    <!--            v-show="noProjectRoleTotal > 0"-->
                    <!--            :total="noProjectRoleTotal"-->
                    <!--            :page.sync="projectRoleQueryParams.pageNum"-->
                    <!--            :limit.sync="projectRoleQueryParams.pageSize"-->
                    <!--            @pagination="getProjectRoleAllocationList"-->
                    <!--          />-->

                </el-tab-pane>

            </el-tabs>

        </el-dialog>

    </div>
</template>

<script>
import { addProjectRoleUser, delProjectRoleUser } from '@/api/basic/projectRoleUser'
import { listRoleAllocation } from '@/api/basic/projectRole'
import { mapGetters } from 'vuex'
import {
    addProjectUser,
    delProjectUser,
    pageListProjectUser,
    addNotice,
    cancelNotice
} from '@/api/basic/projectUser'
import {
    searchPersonalUser
} from '@/api/basic/personalUser'

export default {
    name: 'Project',
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 用户-项目中间表格数据
            userProjectList: [],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                userId: null,
                projectId: null
            },
            // 表单参数
            form: {
                userId: null,
                projectId: null
            },
            // 表单校验
            rules: {},
            allocationTitle: '',
            allocationFlag: null,
            allocationOpen: false,

            queryUserParams: {
                pageNum: 1,
                pageSize: 10,
                phoneNumber: undefined,
                userName: undefined
            },

            allocationQueryRules: {},

            userList: null,
            userListTotal: 0,

            projectRoleQueryParams: {
                pageNum: 1,
                pageSize: 10,
                projectId: ''
            },

            projectRoleUser: {
                projectRoleId: null,
                userId: null
            },
            authProjectRoleOpen: false,
            // 项目角色列表
            yesProjectRoleList: [],
            yesProjectRoleTotal: 0,
            yesProjectRoleLoading: false,
            noProjectRoleList: [],
            noProjectRoleTotal: 0,
            noProjectRoleLoading: false,
            activeName: 'no'
        }
    },
    created() {
        this.getList()
    },
    computed: {
        ...mapGetters([
            'projectId'
        ])
    },
    methods: {

        unAllocatedProjectRole(row) {
            this.projectRoleUser.projectRoleId = row.projectRoleId
            delProjectRoleUser(this.projectRoleUser).then(response => {
                if (response.code === 200) {
                    this.$message.success('移除成功')
                    this.getProjectRoleAllocationList()
                }
            })
        },

        allocatedProjectRole(row) {
            this.projectRoleUser.projectRoleId = row.projectRoleId
            addProjectRoleUser(this.projectRoleUser).then(response => {
                if (response.code === 200) {
                    this.$message.success('分配成功')
                    this.getProjectRoleAllocationList()
                }
            })
        },

        handleAuthProjectRole(row) {
            this.projectRoleUser.userId = row.id
            this.projectRoleQueryParams.userId = row.id
            this.authProjectRoleOpen = true
            this.getProjectRoleAllocationList()
        },

        getProjectRoleAllocationList() {

            this.projectRoleQueryParams.projectId = this.projectId

            listRoleAllocation(this.projectRoleQueryParams).then(response => {
                this.yesProjectRoleList = response.data.yes
                this.yesProjectRoleTotal = response.data.yes.length
                this.yesProjectRoleLoading = false

                this.noProjectRoleList = response.data.no
                this.noProjectRoleTotal = response.data.no.length
                this.noProjectRoleLoading = false
            })
        },
        // 添加项目给用户
        allocationClick(row) {
            this.form.userId = row.id
            addProjectUser(this.form).then(response => {
                this.$message.success('添加成功')
                this.getList()
            })
        },
        // 查询用户
        selectUserList() {
            this.$refs.allocationQueryForm.validate(valid => {
                if (valid) {
                    searchPersonalUser(this.queryUserParams).then(response => {
                            if (response.rows.length === 0) {
                                this.$message.info('暂无数据')
                            }
                            this.userList = response.rows
                            this.userListTotal = response.total
                        }
                    )
                }
            })
        },
        addUserProject() {
            this.allocationTitle = '添加项目用户'
            this.allocationFlag = 'user'
            this.allocationOpen = true
            this.userList = []
            this.form.projectId = this.projectId
        },
        removeUserProject(row) {
            this.form.userId = row.id
            this.form.projectId = this.projectId

            delProjectUser(this.form).then(response => {
                this.$message.success('移除成功')
                this.getList()
            })
        },
        addNotice() {
            addNotice(this.ids).then(response => {
                this.$message.success('操作成功')
                this.getList()
            })
        },
        cancelNotice() {
            cancelNotice(this.ids).then(response => {
                this.$message.success('操作成功')
                this.getList()
            })
        },
        calculateIndex(index) {
            const pageNum = this.queryParams.pageNum
            const pageSize = this.queryParams.pageSize
            return index + 1 + (pageNum - 1) * pageSize
        },
        /** 查询用户-项目中间列表 */
        getList() {
            this.loading = true
            this.queryParams.projectId = this.projectId
            pageListProjectUser(this.queryParams).then(response => {
                this.userProjectList = response.rows
                this.total = response.total
                this.loading = false
            })
        },
        cancel() {
            this.open = false
            this.reset()
        },
        // 表单重置
        reset() {
            this.form = {
                userId: null,
                projectId: null
            }
            this.resetForm('form')
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm('queryForm')
            this.handleQuery()
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        }
    }
}
</script>
